<!--  -->
<template>
  <div class="videoItem">
    <a href="#">
      <div class="videoImgBox">
        <slot name="videoImg"></slot>
        <span class="iconfontBox">
          <span class="iconfont icon-bofang"></span>
        </span>
      </div>
      <div>
        <slot name="videoDesc1" class="videoDesc1"></slot>
        <slot name="videoDesc2" class="videoDesc2"></slot>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang='less' >
.videoItem {
  width: 296px;
  height: 285px;
  a {
    .videoImgBox {
      position: relative;
      .iconfontBox {
        position: absolute;
        left: 20px;
        bottom: 20px;
        display: block;
        width: 32px;
        height: 20px;
        line-height: 20px;
        border: 2px solid #fff;
        border-radius: 20px;
        .icon-bofang {
          position: relative;
          padding-left: 9px;
          color: #fff;
        }
      }
      &:hover {
        .iconfontBox {
          border-color: rgb(255, 103, 0);
          background-color: rgb(255, 103, 0);
        }
      }
    }
    &:hover {
      color: #000;
    }
    .videoDesc1{
        color: #000;
    }
    .videoDesc2{
        font-size: 12px;
        color: #b0b0b0;
    }
  }
}
</style>
